<template>
  <div ref="pieChart" style="width: 400px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const pieChart = ref(null);
let chart = null;

const pieData = [
  { value: 12, name: '李娜丽' },
  { value: 8, name: '郑爽浩' },
  { value: 12, name: '李雷宏' },
  { value: 8, name: '刘强明' },
  { value: 8, name: '吴昊杰' },
  { value: 12, name: '刘强明' },
  { value: 8, name: '赵阳辉' },
  { value: 12, name: '李杰波' },
  { value: 8, name: '吴静欣' },
  { value: 7, name: '李明辉' },
  { value: 10, name: '张雨萱' },
  { value: 9, name: '王梓轩' },
  { value: 6, name: '刘诗雅' },
  { value: 7, name: '陈浩然' },
  { value: 11, name: '赵欣怡' },
  { value: 14, name: '孙嘉伟' },
  { value: 15, name: '周慧敏' },
  { value: 9, name: '吴晨曦' },
  { value: 13, name: '郑思远' },
  { value: 7, name: '钱静雅' },
  { value: 10, name: '徐婉儿' },
];

onMounted(() => {
  chart = echarts.init(pieChart.value);
  const option = {
    title: {
      text: '保安',
      subtext: '上个月的工作处理情况',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '员工业绩',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
      },
    ],
  };
  chart.setOption(option);
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
});
</script>

<style scoped>
/* 在这里添加样式，如果需要的话 */
</style>
